<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
					$(".show").click(function(){
						$("div").show()
					})
					$(".hide").click(function(){
						$("div").hide()
					})
					$(".toggle").click(function(){
						$("div").toggle()
					})
					
					
					
					$(".slideDown").mouseover(function(){
						$("div").stop().slideDown(3000)
					})
					$(".slideUp").click(function(){
						$("div").slideUp()
					})
					$(".slideToggle").click(function(){
						$("div").slideToggle()
					})
					
					
					$(".fadeIn").click(function(){
						$("div").fadeIn()
					})
					$(".fadeToggle").click(function(){
						$("div").fadeToggle()
					})
					$(".fadeTo").click(function(){
						//时间 透明度
						$("div").fadeTo(1000,0.5)
					})
					
					$(".animate").click(function(){
						$("div").animate({
							width: "500px",
							height: "+=50px"	
						},1000)
					})
					
				})
			</script>
		</head>
		<body>
			<!-- display:none -->
			<button class="show">show</button>
			<button class="hide">hide</button>
			<button class="toggle">toggle</button>
			<br />
			<!-- height -->
			<button class="slideDown">sildeDown</button>
			<button class="slideUp">sildeUp</button>
			<button class="slideToggle">sildeToggle</button>
			
			<br />
			<!-- opacity -->
			<!-- opacity rgba -->
			<button class="fadeIn">fadeIn</button>
			<button class="fadeToggle">fadeToggle</button>
			<button class="fadeTo">fadeTo</button>
			<br />
			<button class="animate">animate</button>
			<div style="width: 100px;height: 100px;background-color: pink;">	
			</div>
		</body>
</html>
